<template>
  <div class="amap-page-container">
    <div :style="{width:'100%',height:'0px'}">
      <!-- 搜索框搜索 -->
      <!-- <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box> -->
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
        <el-amap-marker v-for="(marker,index) in markers" :position="marker" :key="index"></el-amap-marker>
      </el-amap>
    </div>
    <!-- 显示关键字抖索结果 -->
    <div id="panel"></div>
  </div>
</template>
<script>
export default {
  //用于关键字搜索
  props:['keyWord','city'],
  data() {
    const self = this;
    return {
      center: [121.59996, 31.197646],
      markers: [
        [121.59996, 31.197646],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      searchOption: {
        city: "上海",
        citylimit: true
      },
      lng: 0,
      lat: 0,
      loaded: false,
      res: "123456",
      //关键字搜索结果
      searchResult: {},
      plugin: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: "all",
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log(result);
                if (result && result.position && result.addressComponent) {
                  self.res = result;
                  self.$parent.positionAddress = self.res;
                  //  console.log("======");
                  // console.log(self.res);
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
computed:{
  newKeyWord(){
    return this.keyWord;
  },
   newCity(){
    return this.city;
  },
},
watch:{
  // 监听搜索关键字的变化
  newKeyWord(newData,oldData){
    setTimeout(() => {
      this.wordSearch(this.keyWord);
    }, 1000);
  },
   // 监听城市的变化
  // newCity(newData,oldData){
  //  setTimeout(() => {
  //     this.wordSearch(this.keyWord);
  //   }, 1000);
  // },
},
  mounted() {
    this.$parent.positionAddress = this.res;
    setTimeout(() => {
      this.wordSearch(this.keyWord);
    }, 1000);
  },
  updated() {
    console.log(this.res);
    this.$parent.positionAddress = this.res;
  },
  methods: {
    addMarker: function() {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
      this.markers.push([lng, lat]);
    },
    // 输入框搜索
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
      }
    },
    //关键字搜索
    wordSearch(keyWord) {
     let _this=this;
      AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 100, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: _this.city, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search(keyWord, (status, result) => {
          console.log(result);
          _this.searchResult = result;
          _this.$parent.searchResult=result;
        });
      });
    }
  }
};
</script>
<style>
.amap-demo {
  height: 300px;
}
#panel{
  display: none;
}
</style>